<template>
    <!-- 水球效果 -->
    <view class="waterpolo">
        <view class="waterpolo__outer">
            <view class="waterpolo__inner">
                <view class="item"></view>
                <view class="item"></view>
                <view class="item"></view>
            </view>
            <view class="text">{{ text }}
                <view class="unit">w</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: ['text']
};
</script>
<style lang="less">
.waterpolo {
    // background-color: #ccc;
    width: 100%;
    height: 100%;
}

.waterpolo__outer {
    position: relative;

    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 5px 1px #36eb366c;
    background-color: #59b8a3;
    overflow: hidden;

    .text {
        position: absolute;
        display: flex;
        align-items: center;
        left: 50%;
        top: 50%;
        font-weight: 500;
        font-size: 66rpx;
        color: #044838;
        transform: translate(-50%, -50%);
    }
    .unit{
        font-size: 33rpx;
    }
}
.waterpolo__inner {
    position: absolute;
    width: 130%;
    height: 130%;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: innerRotate 20s linear infinite;

    .item {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        width: 100%;
        height: 100%;
        border-radius: 45% 47% 44% 42%; /*不可以是纯圆形*/
        transition: all 10s linear;
        background-color: #ffffff;
    }

    .item:nth-child(2) {
        border-radius: 38% 46% 43% 47%;

        background-color: #ffffffe1;
        transform: translate(-50%, -50%) rotate(130deg);
    }
    .item:nth-child(3) {
        border-radius: 42% 46% 37% 40%;

        transform: translate(-50%, -50%) rotate(-135deg);
    }

    .item:nth-child(1) {
        background-color: #ffffffb2;

        animation: innerRotate 10s linear infinite;
    }
}
@keyframes innerRotate {
    100% {
        transform: translate(-50%, -50%) rotate(720deg);
    }
}
</style>